<template>
    <div id="exhibition-contact">
        <div class="exhibition-contact-content container">
            <div class="contact-left">
                <div class="contact-way">
                    <div class="contact-left-title">
                        <div class="title-text">联系方式</div>
                    </div>
                    <div class="contact-con">
                        <div>电话：{{exhibitionInfo.phone}}</div>
                        <div>传真：{{exhibitionInfo.fax}}</div>
                        <div>地址：{{exhibitionInfo.address}}</div>
                        <div>编码：{{exhibitionInfo.zipCode}}</div>
                        <div>邮件：{{exhibitionInfo.eMail}}</div>
                        <div>网址：{{exhibitionInfo.webUrl}}</div>
                    </div>
                </div>
                <div class="contact-way">
                    <div class="contact-left-title">
                        <div class="title-text">交通路线</div>
                    </div>
                    <div class="contact-con">
                        <p
                            v-for="(item,index) in exhibitionInfo.trafficWay"
                            :key="'trafficWap'+index"
                        >{{item}}</p>
                    </div>
                </div>
                <div class="contact-way">
                    <div class="contact-left-title">
                        <div class="title-text">交通路线</div>
                    </div>
                    <img class="map" src="../../../assets/map.png" alt="">
                    <!-- 地图可用，需加上ak密钥，在handlerMapReady中修改地理位置 -->
                   <!--  <baidu-map
                        class="map"
                        ak=""
                        :center="mapCenter"
                        :zoom="mapZoom"
                        @ready="handlerMapReady"
                    >
                        <bm-marker
                            :position="mapCenter"
                            animation="BMAP_ANIMATION_BOUNCE"
                        >
                        </bm-marker>
                    </baidu-map> -->
                </div>
            </div>
            <div class="contact-right">
                <exhibition-center-recommended></exhibition-center-recommended>
            </div>
        </div>
    </div>
</template>


<script>
//百度地图
// import BaiduMap from "vue-baidu-map/components/map/Map.vue";
// import BmMarker from "vue-baidu-map/components/overlays/Marker";

import ExhibitionCenterRecommended from "@/components/exhibitionCenterRecommended";
export default {
    name: "Exhibitioncontact",
    components: {
        ExhibitionCenterRecommended,
        // BaiduMap,
        // BmMarker
    },
    data() {
        return {
            mapCenter: { lng: 0, lat: 0 },
            mapZoom: 3,
            exhibitionInfo: {
                phone: "123-456789109",
                fax: "123-45678909",
                address: "四川省峨眉山市胜利镇宝马街8号",
                zipCode: "510500",
                eMail: "123456789@163.com",
                webUrl: "http://www.123456.com",
                trafficWay: [
                    "临港开发区会展中心位于四川省峨眉山市市区东面，境内地理位置优越，交通便捷。",
                    "观众可乘坐,2,3,46，路公交直达会展中心。",
                    "距离火车站步行5分钟路程。",
                    "距离成绵乐高铁站 驱车10分钟车程。",
                    "距离成都双流国际机场半小时车程。",
                    "距离乐尚大佛景区10公里，驱车10分钟车程。"
                ]
            }
        };
    },
    methods: {
        /* 
        * 修改地理位置
        */
        // handlerMapReady({ BMap, map }) {
        //     this.mapCenter.lng = 116.404;
        //     this.mapCenter.lat = 39.915;
        //     this.mapZoom = 15;
        // }
    }
};
</script>
<style lang="scss" scoped>
#exhibition-contact {
    .exhibition-contact-content {
        margin-top: 58px;
        display: flex;
        .contact-left {
            width: 898px;
            text-align: left;
            .contact-way {
                .contact-con {
                    padding: 22px 0 30px;
                    line-height: 27px;
                    color: #010000;
                }
                > img {
                    margin: 29px 0 44px;
                }
            }
            .contact-left-title {
                text-align: center;
                border-bottom: 1.5px solid #c81622;
                .title-text {
                    width: 114px;
                    height: 38px;
                    line-height: 38px;
                    color: #fff;
                    font-size: 20px;
                    background-color: #c81622;
                }
            }
        }
        .contact-right {
            flex: auto;
            margin: 11px 0 0 22px;
        }
    }
    .map {
        width: 100%;
        height: 300px;
        margin:29px 0 44px;
    }
}
</style>